<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>当日列表</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">

</style>
</head>
<body>
<div id="app" class="">
	<h3>msg：{{ msg }}</h3>
	<h3>数据总数：{{ arr_stock.length }}</h3>
	<el-table :data="arr_stock" border>
		<el-table-column prop="n" label="Name" width="180">
			<template #default="scope">
				<a :href=`https://gushitong.baidu.com/stock/ab-${scope.row.c}?name=${scope.row.n}` target="_blank">{{ scope.row.n }}</a>
			</template>
		</el-table-column>
		<el-table-column prop="c" label="code" width="180"></el-table-column>
		<el-table-column prop="z" label="zdf" width="180"></el-table-column>
		<el-table-column prop="p" label="price" width="180" sortable :sort-method="sortFunc2"></el-table-column>
		<el-table-column prop="t" label="市值" width="180" sortable :sort-method="sortFunc"></el-table-column>
	</el-table>
	
</div>
</body>
<script>
// let str = '[{"n":"中超控股","c":"002471","p":"5.65","z":"-10.03%","t":"77.33"},{"n":"尚纬股份","c":"603333","p":"8.79","z":"-10.03%","t":"54.63"}]';
let str = `



[{"n":"中超控股","c":"002471","p":"5.65","z":"-10.03%","t":"77.33"},{"n":"尚纬股份","c":"603333","p":"8.79","z":"-10.03%","t":"54.63"},{"n":"金时科技","c":"002951","p":"13.39","z":"-10.01%","t":"54.23"},{"n":"联化科技","c":"002250","p":"13.32","z":"-10.00%","t":"121.39"},{"n":"均瑶健康","c":"605388","p":"10.35","z":"-10.00%","t":"62.15"},{"n":"丽人丽妆","c":"605136","p":"12.26","z":"-9.99%","t":"49.10"},{"n":"中衡设计","c":"603017","p":"10.24","z":"-9.94%","t":"28.25"},{"n":"百利电气","c":"600468","p":"8.68","z":"-9.87%","t":"94.42"},{"n":"华脉科技","c":"603042","p":"16.59","z":"-9.69%","t":"26.64"},{"n":"曲美家居","c":"603818","p":"4.23","z":"-9.03%","t":"29.14"},{"n":"恒通股份","c":"603223","p":"10.26","z":"-8.96%","t":"73.28"},{"n":"顺钠股份","c":"000533","p":"7.65","z":"-8.93%","t":"52.85"},{"n":"永安药业","c":"002365","p":"20.86","z":"-8.87%","t":"61.47"},{"n":"洛凯股份","c":"603829","p":"18.45","z":"-8.75%","t":"29.52"}]




`;


const Main = {
data() {
	return {
		msg: '--',
		arr_stock: JSON.parse(str),
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		// this.$refs.myParRef.focus();		//让myParRef组件自动获取焦点，但没生效
		
	});
	// console.log("实例挂载完成后被调用2");
},
methods:{
	//排序 - 自定义排序
	sortFunc(a, b){
		// console.log('a', a);
		// console.log("b", b);
		return Number(a.t) - Number(b.t);
	},
	sortFunc2(a, b){
		return Number(a.p) - Number(b.p);
	},
	hello(par){
		this.message = "参数值为：" + par;
	}
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>